<!DOCTYPE html>
<html>
  <head>
    <title>Maps API Wizard</title>
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans"
      rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="wizard.css">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript" src="boundswidget.js"></script>
    <script type="text/javascript" src="mapoptions.js"></script>
    <script type="text/javascript" src="markeroptions.js"></script>
    <script type="text/javascript" src="pageoptions.js"></script>
    <script type="text/javascript" src="gui.js"></script>
    <script type="text/javascript" src="generator.js"></script>
    <script type="text/javascript" src="soyutils.js"></script>
    <script type="text/javascript" src="template.js"></script>
    <script type="text/javascript" src="markers.js"></script>
  </head>
  <body>
    <nav>
      <a href="#tab=pagemapoptions">Page/Map</a>
      <a href="#tab=markers">Markers</a>
      <a href="#tab=preview">Preview</a>
      <a href="#tab=code">Code</a>
    </nav>
    <div id="wizard">
      <div class="optiongroup">
        <div id="map-canvas"></div>
        <form id="geocode">
          <input id="location"><input type="submit" value="Geocode &rarr;">
        </form>
      </div>
      <div id="pagemapoptions">
        <div class="optiongroup">
          <form class="optionspanel containeroptions">
            <h2>Map Container</h2>
            <label>Width:
              <input type="number" min="100" max="1000" step="50" value="600"
                name="width">
            </label>
            <label>Height:
              <input type="number" min="100" max="700" step="50" value="450"
                name="height">
            </label>
          </form>
          <form id="mapoptions" class="optionspanel">
            <h2>Map Options</h2>
            <label>mapTypeId:
              <select name="mapTypeId"></select>
            </label>
            <hr>
            <label>
              <input checked type="checkbox" name="bounds"> init map with bounds
            </label>
            <button class="setbounds-viewport">set to current viewport</button>
            <button class="setbounds-markers">set to include all markers</button>
            <button class="fitbounds">fit viewport to set bounds</button>
            <hr>
            <label>
              <input checked type="checkbox" name="draggable"> draggable
            </label>
            <label>
              <input checked type="checkbox" name="scrollwheel"> scrollwheel
            </label>
          </form>
        </div>
        <form class="optiongroup optionspanel miscoptions">
          <h2>Miscellaneous Features</h2>
          <label>
            <input checked type="checkbox" name="drawPolygon"> map click draws polygon
          </label>
          <label>
            <input checked type="checkbox" name="clickToAddMarker"> map click adds marker
          </label>
          <label>
            <input checked type="checkbox" name="geocode"> geocode search box
          </label>
          <label>
            <input checked type="checkbox" name="geolocation"> show user's location
          </label>
          <label>
            <input checked type="checkbox" name="checkboxes"> checkboxes to 
            enable/disable visible marker collections
          </label>
          <label>
            <input type="checkbox" name="dblclickToRemoveMarker"> dblclick on marker removes marker
          </label>
        </form>
      </div>
      <div id="markers"> 
        <div id="marker-collections" class="optiongroup">
          <h3>Marker Collections</h3>
          <div id="marker-collection-sentinel" class="marker-collection">
            <img src="http://maps.gstatic.com/mapfiles/marker_grey.png"><br>Add
            Collection
          </div>
        </div>
        <div class="optiongroup">
          <div id="markeroptions" class="optionspanel">
            <h2>Collection Options</h2>
            <label>
              name: <input id="collection-name" value="Untitled">
            </label>
            <button id="marker-collection-delete">Delete collection</button>
            <hr>
            <h2>Marker Options</h2>
            <label>
              icon url: <input type="text" name="icon" placeholder="default">
            </label>
            <label>
              shadow url: <input type="text" name="shadow" placeholder="default">
            </label>
            <label>
              <input type="checkbox" name="draggable"> draggable
            </label>
            <label>
              <input checked type="checkbox" name="clickable"> clickable
            </label>
            <label>
              <input type="checkbox" name="flat"> flat (shadowless)
            </label>
            <label>
              <input checked type="checkbox" name="visible"> visible
            </label>
          </div>
        </div>
        <div class="optiongroup" id="addMarker-div">
          <form class="optionspanel" id="addMarker">
            <h2>Add Marker</h2>
            <small>Click map or enter address below.
              If content is specified, an info window will open on click.</small>
            <label>
              Tooltip/title: <input id="add-marker-title">
            </label>
            <label>
              Info Window content (HTML): <input id="add-marker-content">
            </label>
            <label>
              Address/LatLng: <input id="add-marker-address">
            </label>
            <input type="submit" value="Add Marker &rarr;">
          </form>
        </div>
      </div>
      <div id="preview" class="optiongroup">
        <iframe>
        </iframe>
      </div>
      <div id="code" class="optiongroup">
        <textarea id="preview_html" readonly="true" cols="80"></textarea>
      </div>
    </div>
  </body>
</html>
